<template>
  <body>
    <div class="card animate__animated animate__fadeIn" id="mainCard">
      <div id="title" class="blue animate__animated animate__pulse">ECA</div>
      <div id="subTitle" class="blue_2">
        一款基于微表情识别的智能会议记录系统
      </div>
      <img id="img" src="../images/login.png" height="52%" alt="" />
      <div id="form">
        <div id="welcome" class="animate__animated animate__fadeInRight">Welcome Back</div>
        <div id="tips" class="animate__animated animate__fadeInRight">若要使用本系统,你需要先进行登录📋</div>
        <div id="inputs">
          <el-input v-model="idOrName" placeholder="请输入用户名、ID或电话号码">
            <template #prepend>🧑‍💻</template>
          </el-input>
          <el-input
            type="password"
            v-model="passwd"
            placeholder="请输入密码"
            show_password
          >
            <template #prepend>🔑</template>
          </el-input>
          <el-button
            id="loginButton"
            type="primary"
            size="large"
            @click="clickLoginButton()"
            >登录系统</el-button
          >
          <div id="copyleft">
            Copyleft:&nbsp;本项目基于MIT协议
            <a
              href="https://gitee.com/canyue2048/emotional-conference-analysis-manager-ui"
              >开源</a
            >
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="确保你是人类"
      v-model="verifyVisible"
      width="340px"
      destroy-on-close
    >
      <div>
        <slide-verify
          slider-text="向右滑动完成拼图"
          @success="login"
          :imgs="verifyImages"
        ></slide-verify>
      </div>
    </el-dialog>
  </body>
</template>

<script>
import { show_success_msg, show_error_msg } from "../js/msg.js";
import axios from "axios";
import { baseUrl } from "../main.js";
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
export default {
  components: { SlideVerify },
  data() {
    return {
      verifyVisible: false,
      idOrName: "",
      passwd: "",
      baseUrl: baseUrl,
      verifyImages:["../verifyImages/001.png"]
    };
  },
  methods: {
    clickLoginButton() {
      if(this.idOrName == "" || this.passwd == ""){
        show_error_msg("请填写完整");
        return;
      }
      this.verifyVisible = true
    },
    login() {
      let formdata = new FormData();
      formdata.append("idOrName", this.idOrName);
      formdata.append("passwd", this.passwd);
      axios
        .post(this.baseUrl + "/user/login", formdata)
        .then((response) => {
          let data = response.data;
          console.log(data);
          if (data.status == "200") {
            localStorage.setItem("userId", data.data.id);
            localStorage.setItem("admin", data.data.admin);
            localStorage.setItem("userName", data.data.name);
            localStorage.setItem("token", data.token);
            this.$router.push({ name: "home" });
            show_success_msg("登录成功", "欢迎回来:" + data.data.name);
          } else {
            show_error_msg("登录失败", data.msg);
            this.verifyVisible = false;
            this.passwd = "";
          }
        })
        .catch((error) => {
          show_error_msg("登录失败", "与服务器通讯异常");
          this.verifyVisible = false;
        });
    },
    revoke_permissions() {
      localStorage.clear();
    },
  },
  mounted() {
    this.revoke_permissions();
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  background: linear-gradient(
    170deg,
    hsla(12, 100%, 96%, 0.274),
    hsla(199, 100%, 53%, 0.342)
  );
}

.card {
  margin: 10px;
  background: rgba(255, 255, 255, 0.63);
  box-shadow: rgba(84, 118, 150, 0.349) 5px 5px 5vh;
  /* -webkit-backdrop-filter: blur(4px); */
  /* backdrop-filter: blur(4px); */
  border-radius: 2vh;
}

#mainCard {
  display: flex;
  place-items: flex-start;
  justify-content: flex-start;
  height: 70vh;
  width: 120vh;
  text-align: left;
  position: absolute;
  margin: auto;
  padding: 2vh 5vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#title {
  margin-top: 2vh;
  font-size: 6vh;
  font-weight: bold;
  font-family: "SourceHanSansSCMedium";
}

#subTitle {
  margin-top: 10.5vh;
  margin-left: -11vh;
  width: 100vw;
  font-weight: bold;
  font-size: 2vh;
}

#img {
  margin-top: 21vh;
  margin-left: -30vw;
}

#form {
  /* display: flex; */
  /* background-color: rgba(231, 202, 202, 0.19); */
  height: 45vh;
  width: 70vw;
  margin-left: 3vw;
  margin-top: 13vh;
  padding: 3vh;
}

#welcome {
  font-size: 4vh;
  font-family: "SourceHanSansSCMedium";
  font-weight: bolder;
}

#tips {
  font-size: 14px;
  font-family: "SourceHanSansSC";
}

#inputs {
  height: 25vh;
  margin-top: 6vh;
  /* background-color: rgba(231, 202, 202, 0.19); */
}

#inputs > * {
  margin-bottom: 2.3vh;
  height: 5vh;
}

#loginButton {
  width: 100%;
}

#copyleft {
  font-size: 0.8vw;
}
</style>